import React from "react";
import {Button, Modal, Select} from "antd";
import Tags from "../user-list/tags";
import Info from "../../../service/info";
import UserModel from "../../../model/user";

const {Option} = Select
const tags = Tags.map((tag, i) => ({title: tag, index: i,}))


class UserTagModal extends React.Component {

    constructor(props) {
        super(props)
        this.tags = tags
        this.model = new UserModel()
        this.state = {
            newUserTags: [],
        }
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (this.props.visible && prevProps.visible === false) {
            setTimeout(() => {
                this.setState({
                    newUserTags: this.markToTags(this.props.user.Mark)
                })
            }, 0)
        }
    }

    tagsToMark = (tags) => {

        let mark = 0
        for (let i = 0; i < tags.length; i++) {
            let value = tags[i].value
            mark += 1 << value
        }
        return mark

    }

    markToTags = (mark) => {

        const m = mark
        const b = m.toString(2)
        const l = Tags.length
        let markString = ''
        if (l > b.length) {
            markString += '0'.repeat(l - b.length)
            markString += b
        } else {
            markString = b
        }

        // const mark = user.U.Mark.toString(2).split().reverse().join()
        const arr = []
        markString = markString.split('').reverse().join('')
        for (let i = 0; i < markString.length; i++) {
            let char = markString[i]
            if (Number(char) === 1) {
                let key = i
                let value = i
                let label = Tags[i]
                arr.push({key, value, label,})
            }
        }
        return arr

    }

    setTags = () => {
        const tags = this.state.newUserTags
        let uid = this.props.user.Id
        let mark = this.tagsToMark(tags)
        this.model
            .setTag({mark, uid,})
            .then(resp => {
                if (resp.data.ok === 1) {
                    Info.success('修改标签成功')
                }
            })
            .then(() => {
                this.props.fetchAll()
            })
    }

    onTagSelectChange = (value) => {
        this.setState({newUserTags: value,})
    }


    render() {

        const tagsOptions = this.tags.map(tag => {
            return <Option value={tag.index} key={tag.index}>{tag.title}</Option>
        })

        const tagSelect = <Select
            mode="multiple"
            labelInValue
            style={{ width: '100%' }}
            placeholder="选择用户标签"
            onChange={this.onTagSelectChange}
            value={this.state.newUserTags}
        >
            {tagsOptions}
        </Select>

        const tagModal = <Modal
            title="添加标签"
            visible={this.props.visible}
            style={{width: '100%',}}
            footer={null}
            maskClosable={true}
            onCancel={this.props.onCancel}
        >
            {tagSelect}
            <Button
                onClick={this.setTags}
            >保存</Button>
        </Modal>
        return tagModal
    }

}

export default UserTagModal